<template>
  <div class='container'>
      <!-- -------------弹框--------------------------------- -->
      <el-dialog :title="showTitle" :visible="showDialog" @close="handleCloseDialog" @open="openDialog" v-loading="loading">
          <el-form label-width="100px" :model="formRule" :rules="rules" ref="formRule">
            <el-form-item label="所属学科" prop="subjectID" v-if="!routerId">
               <el-select placeholder="请选择" style="width:350px"  v-model="formRule.subjectID">
                <el-option :label="item.label" :value="item.value" v-for="item in subjectList" :key="item.value"></el-option>
            </el-select>
            </el-form-item>
           <el-form-item label="标签名称" prop="tagName">
             <el-input placeholder="请输入标签名称" size="small" style="width:350px" v-model="formRule.tagName"></el-input>
          </el-form-item>

        </el-form>
          <span slot="footer" class="dialog-footer" center>
              <el-button @click=handleCloseDialog>取 消</el-button>
              <el-button type="primary" @click="submitClick">确 定</el-button>
            </span>
      </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { add, update } from '@/api/hmmm/tags'
export default {
  name: 'TagsAdd',
  data () {
    return {
      subjectList: [],
      loading: false,
      formRule: {
        tagName: '',
        subjectID: ''
      },
      rules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: ['blur', 'change'] }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    routerId: {
      required: true

    }
  },
  computed: {
    showTitle () {
      return this.formRule.id ? '修改标签' : '新增标签'
    }

  },
  methods: {
    // 关弹框
    handleCloseDialog () {
      this.$emit('handleCloseDialog')
      this.$refs.formRule.resetFields()
      this.formRule = {}
    },
    async openDialog () {
      if (!this.routerId) {
        // 如果id不存在（即不是从学科过来的），就发请求获取学科简单列表数据渲染下拉框
        const res = await simple()
        this.subjectList = res.data
        return
      }
      console.log(this.routerId)
    },
    // 弹框提交
    submitClick () {
      this.$refs.formRule.validate(async (flag) => {
        if (!flag) return false
        if (this.formRule.id) {
          await update(this.formRule)
          // console.log(res)
          this.$emit('editSuccess')
          this.$message.success('修改标签成功')
          // console.log('修改请求')
        } else {
          let obj = this.formRule
          if (this.routerId) {
            obj = {
              tagName: this.formRule.tagName,
              subjectID: this.routerId
            }
          }
          const res = await add(obj)
          if (res.status === 200) {
            this.$message.success('新增标签成功')
            this.formRule = {
              ...this.formRule,
              id: res.data.id
            }
            this.$emit('addTags')
          } else {
            this.$message.success('新增标签失败')
          }
        }
        this.handleCloseDialog()
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
